<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>动态</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
    	<link rel="stylesheet" type="text/css"   href="../css/mui.min.css" />
		<style>
			body{
				background: #fff;
				font-size: 14px;
			}
			header{
				position: fixed !important;
				top:0;
				width: 100%;
				z-index: 99;
				background: #fff;
			}
			.aui-tab{
				/*padding:8px 0;*/
			}
			#yanse li{
				float: left;
				padding: 10px;
				margin-right: 5px;
			}
			#yanse li.active{
				color: #327afa;
			    border-bottom: 2px #327afa solid;
			}
			.divHeader{
				width:40%;
				margin:0 auto;
			}
			.dongtai ul{
				background: #ededed;
			}
			.dongtai .aui-list-view .aui-img-object{
				max-width: 40px;
				height: 40px;
				width:40px;
			}
			.aui-list-view .aui-img-object.aui-pull-left{
				margin-right: 10px;
			}
			.aui-list-view-cell{
				margin-bottom: 15px;
				background: #fff;
			}
			.aui-list-view-cell .post_detail{
				font-size:12px;
			}
			.aui-img-body{
				float: left;
				max-width: 195px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.remenType ul{
				background: #fff;
			}
			.aui-list-view:after{
				border:none;
			}
			.type{
				background: #feb77e;
				color:#fff;
				font-size: 11px;
				padding: 3px 5px;
			}
			.title{
				width: 100%;
				display: inline-block;
				margin: 6px;
				word-wrap:break-word;
			}
			.img-item {
				background-color: #eee;
				background-size: cover;
				height:135px;
				margin-right:2%;
				margin-top: 3px;
				float: left;
			}
			.img-item.type1{
				width:82%;
			}
			.img-item.type2{
				width:41%;
			}
			.img-item.type3{
				width:31%;
			}
			.shoucang{
				text-align: center;
			}
			.shoucang.collected span{
				background: #2ecc71;
			}
			/*热门*/

			.remenType{
				/*display: none;*/
				z-index: 100;
			}
			.remenType li{
				font-size: 14px;
				position: relative;
			}
			.remenType li:last-of-type:before{
				content: "";
				position: absolute;
				width: 1px;
				height: 80%;
				background: #e8e8e8;
				left: 4px;
				top:10%;
			}
			/**更多类别*/
			.moreType{
				display: none;
				position: fixed;
				top:0px;
				background: #fff;
				padding-bottom: 20px;
				z-index: 999;
			}
			.unfoldType i{
				position: absolute;
				right:0;top:5px;color:#aaa !important;
			}
			.moreType .aui-list-view-cell{
				margin-top:0;
			}
			.moreList{
				padding: 0 15px;
			}
			.moreList ul li{
				text-align: center;
				padding: 3px;
				border-radius: 5px;
				margin-bottom: 10px;
				border:1px solid #ececec;
				font-size: 13px;
				width:22%;
				float: left;
				margin-right:3%;

			}
			.moreList ul li.active{
				color:white;
				background: #327afa;
			}
			.spanMoreType{
				position: absolute;
				right:0;
				display: block;
				background: #fff;
				padding:10px;
				color:#aaa;
			}
			.h0{
				height: 0;
			}
			.kongshuju {
                display: none;
                padding-top: 150px;
            }
            .kongshuju p {
                margin-top: 10px;
                font-size: 14px;
                color: #999;
                text-align: center;
            }
		</style>
	</head>
	<body>
		<div class="contain dongtai" >
			<div class="remenType h0">
				<div class="aui-tab  aui-border-b" id="yanse">
					<ul class="" id="Category-content">
					</ul>
					<span class="spanMoreType aui-border-l"   data-type="2" tapmode ><i class="aui-iconfont aui-icon-unfold"></i></span>
				</div>
			</div>
			<ul class="aui-list-view list-content" id="list-content-1">
			</ul>
			<ul class="aui-list-view list-content" id="list-content-2" style="margin-top:43px;">
				<li style="background:#fff;color:#aaa;height:100px;text-align: center;padding-top:40px;">
				该类目下没有新产品
				</li>
			</ul>
			<div class="kongshuju">
				<p>暂无数据</p>
			</div>
		</div>
		<div class="moreType">
			<ul class="aui-list-view">
		        <li class="aui-list-view-cell" style="position: relative;">
		            <div class="unfoldType">选择分类<i class="aui-iconfont aui-icon-fold"></i></div>
		        </li>
		    </ul>
			<div class="moreList">
				<ul id="Category-content2">
				</ul>
			</div>
		</div>
	</body>
	<script id="list-template" type="text/x-dot-template">
		{{ for(var i in it){ }}
		<li class="aui-list-view-cell aui-img list-item" item-id="{{=it[i].goods.itemid}}">
			<img class="aui-img-object aui-pull-left" src="{{=it[i].thumb}}" onclick="go2Shop({{=it[i].userid}});">
			<div class="aui-img-body">
				<span onclick="go2Shop({{=it[i].userid}});">{{=it[i].company}}</span>
				<p class="post_detail">
					<span class="time">{{=formatMsgTime(it[i].goods.addtime)}}</span>
					<!-- <span class="time">2016-12-1</span> -->
					&nbsp;&nbsp;浏览<span class="sum">{{=it[i].goods.hits}}</span>
				</p>
			</div>
			<div class="shoucang aui-pull-right {{? it[i].isCollect == 1}}collected{{?}}">
				<span class="type">{{? it[i].isCollect == 1}}已{{?}}收藏</span>
				<!-- <p>{{=it[i].collected}}人</p> -->
			</div>
			<div class="title">{{=it[i].goods.title}}</div>
			{{? it[i].goods.thumb }}
			<div class="conttent aui-clearfix">
			   {{? it[i].goods.thumb&&!it[i].goods.thumb1 }}
			    <div class="img-item type1" style="background-image: url({{=it[i].goods.thumb}});"></div>
			   {{?? it[i].goods.thumb&&it[i].goods.thumb1&&!it[i].goods.thumb2}}
			   <div class="img-item type2" style="background-image: url({{=it[i].goods.thumb}});"></div>
			   <div class="img-item type2" style="background-image: url({{=it[i].goods.thumb1}});"></div>
			   {{??}} 
			   <div class="img-item type3" style="background-image: url({{=it[i].goods.thumb}});"></div>
			   <div class="img-item type3" style="background-image: url({{=it[i].goods.thumb1}});"></div>
			   <div class="img-item type3" style="background-image: url({{=it[i].goods.thumb2}});"></div>
			   {{?}}
			</div>
			{{?}}
		</li>
		{{ } }}
	</script>
	<script id="Category-template" type="text/x-dot-template">
		<li class="active"  data-type="0" tapmode onclick="switchChange2(this,2)">全部</li>
		{{ for(var i in it){ }}
		<li data-type="{{=it[i].catid}}" tapmode onclick="switchChange2(this,2)">{{=it[i].catname}}</li>
		{{ } }}
	</script>
	<script id="Category-template2" type="text/x-dot-template">
		<li class="active"  data-type="0" tapmode onclick="switchChange2(this,2)">全部</li>
		{{ for(var i in it){ }}
		<li  data-type="{{=it[i].catid}}" tapmode onclick="switchChange2(this,2)">{{=it[i].catname}}</li>
		{{ } }}
	</script>
	<script type="text/javascript" src="../script/api.js" ></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/doT.min.js"></script>
	<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="../script/iscroll.js"></script>
	<script type="text/javascript" src="../script/mui.min.js"></script>
	<script type="text/javascript">
		var page =1,categoryid=0,isLock = false;
		window.type=1;
		apiready = function() {
			api.parseTapmode();
		
			api.setRefreshHeaderInfo({
				visible : true,
				loadingImg : 'widget://image/ptr_pull.png',
				bgColor : '#efeff4',
				textColor : '#959595',
				textDown : '刷新动态',
				textUp : '松开刷新',
				showTime : true
			}, function(ret, err) {
				page = 1;
				isLock=false;
				loadData();
			});

			// 监听是否达到底部上拉加载
	        api.addEventListener({
	            name : 'scrolltobottom'
	        }, function(ret, err) {
	            page++;
	            if (!isLock)loadData(page);
	        });

	        // 监听收藏更新
	        api.addEventListener({
	            name : 'updateItemFavoriteStatus'
	        }, function(ret, err) {
	        	if(ret.value){
	        		var updateItemid=ret.value.itemid;
	        		var updateStatus=ret.value.status;
	        		
	        		$('.list-item').each(function(){
	        			var thisid=$(this).attr('item-id');
	        			if(thisid==updateItemid){
	        				var $shoucang=$(this).find('.shoucang');
	        				if(updateStatus==1){
	        					$shoucang.addClass('collected');
	        					$shoucang.find('span').text('已收藏');
	        				}else{
	        					$shoucang.removeClass('collected');
								$shoucang.find('span').text('收藏');
	        				}
	        			}
	        		});
	        	}
	        });

			api.refreshHeaderLoading();
		}

		$(document).ready(function(){
			$('.remenType').hide();
			switchChange(type);


			//更多分类方法
			var mask = mui.createMask(hideType);//callback为用户点击蒙版时自动执行的回调；
			//隐藏更多分类和遮罩
			function hideType(){
				$(".moreType").css({"display":"none"});
			}
			//热门更多时候的选择  
			$(".moreList ul li").click(function(){
				changeCheck(this);
			})
			// 显示更多类别
			$(".spanMoreType").click(function(){
				$(".moreType").css({"display":"block"})
				mask.show();//显示遮罩
			})
			// 隐藏更多类别
			$(".moreType .unfoldType").click(function(){
				hideType();
				mask.close();

			});

			$('.contain').delegate('.list-content li','click',function(e){
				var itemid=$(e.target).closest('li').attr('item-id');

				if($(e.target).parent().hasClass('shoucang')){
					$shoucang=$(e.target).parent();
					getStorageAll();
					if($shoucang.hasClass('collected')){
						//取消操作
						data = {
							userName: user_name,
							type: 1,
							id: itemid,
						};
						url = "User/collectionCancel";
						ajaxRequest(url, 'post', data, function (ret, err) {
							if (ret.status == 1) {
								$shoucang.removeClass('collected');
								$shoucang.find('span').text('收藏');
                            }
                        });
					}else{
						//收藏操作
						var url = 'factory/collect/userid/' + user_id +'/type/mall/id/' + itemid ;
						ajaxRequest(url, 'get', {}, function (ret, err) {
							if(ret.msg == 1){
								$shoucang.addClass('collected');
								$shoucang.find('span').text('已收藏');
							}else{
								api.toast({
									msg : ret.msg,
									duration : 2000,
									location : 'bottom'
								});
							}
						});
					}
				}else{
					go2Pro(itemid);
				}
			});

		});

		// 水平滚动
		var myScroll;
		function loadHorScroll () {
		    myScroll = new IScroll('#yanse', {
		    scrollX: true,
		    scrollY: false,
		    mouseWheel: true ,
		    vScroll: false,
		    click:true,
		    beforeScrollStart: function (e) {
		           if ( this.absDistX > (this.absDistY + 5 ) ) {
		               // user is scrolling the x axis, so prevent the browsers' native scrolling
		               e.preventDefault();
		           }
		        }
		   });
		}

		// 计算水平滚动的宽度
		function getWidth(){
			var height=0;
			$("#yanse").find("li").each(function(){
				height+=$(this).outerWidth(true);
			}) 
			return height;
		}

		//获取分类
		function getCategory(type){
			window.type = type;
			var data = {};
			var url = 'factory/index';
			ajaxRequest(url, 'get', data, function (ret, err) {
                if (ret.status == 1) {
                    categoryid = ret.msg[0].catid;
                    var content = $api.byId('Category-content');
                    var content2 = $api.byId('Category-content2');
                    var tpl = $api.byId('Category-template').text;
                    var tpl2 = $api.byId('Category-template2').text;
                    var tempFn = doT.template(tpl);
                    var tempFn2 = doT.template(tpl2);
                    $api.html(content, '');
                    $api.html(content2, '');
                    $api.prepend(content, tempFn(ret.msg));
                    $api.prepend(content2, tempFn2(ret.msg));
                    //颜色宽度
				    $("#yanse ul").width(getWidth());
                } else {
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'bottom'
                    })
                }
            })
		}

		//为了在下面的热门类别可以通用，单独出来
		function changeCheck(obj){
			var catTarget=$(obj).text();
			$('#Category-content li').each(function(){
				if($(this).text()==catTarget){
					$(this).siblings(".active").removeClass("active");
					$(this).addClass("active");
				}
			});
			$('#Category-content2 li').each(function(){
				if($(this).text()==catTarget){
					$(this).siblings(".active").removeClass("active");
					$(this).addClass("active");
				}
			});
		}

		function switchChange(type){
			$('.list-content').hide();
			$('#list-content-'+type).show();

			if(type==2){
				$('.remenType').show();
				if(!$('#Category-content li').length){
					getCategory(type);
					loadData();
				}
				// 水平滚动
			    loadHorScroll();
			}else{
				$('.remenType').hide();
			}
			window.type=type;
		}

		function switchChange2(obj,type){
			// 改变选择状态
			changeCheck(obj);
			categoryid = $(obj).attr("data-type");
			switch(categoryid){
				case "1":
					// $(".remenType").css({"display":"none"});
					$(".remenType").addClass("h0");
					break;
					case "2":
					// $(".remenType").css({"display":"block"});
					$(".remenType").removeClass("h0");
					break;
				}
			api.refreshHeaderLoading();
		}

		function loadData(toPage){
			toPage=toPage?toPage:page;
			getStorageAll();
			if(user_name){
				if(toPage==1)api.refreshHeaderLoading();

				isLock = true;

				var data = {};
				var url='Mall/goodsNewLists/type/'+type+'/page/'+toPage+'/categoryId/'+categoryid+'/userName/'+user_name;
				ajaxRequest(url, 'get', data, function (ret, err) {
					api.refreshHeaderLoadDone();			
	                if (ret.status == 1) {
	                	var content = $api.byId('list-content-'+type);
	                    var tpl = $api.byId('list-template').text;
	                    var tempFn = doT.template(tpl);
	                    if (toPage > 1) {
	                    	if(!$.trim(ret.msg)){
	                    		isLock=true;
	                    		return;
	                    	}
		                    $api.append(content, tempFn(ret.msg));
		                } else {
		                	if(ret.msg){
		                		$api.html(content, tempFn(ret.msg));
		                	}else{
		                		$api.html(content, '<li style="background:#fff;color:#aaa;height:100px;text-align: center;padding-top:40px;">'+
		                			'该类目下没有新产品</li>');
		                	}
		                    
		                }
		                isLock = false;
	                } else {
	                    api.toast({
	                        msg: ret.msg,
	                        duration: 2000,
	                        location: 'bottom'
	                    })
	                }
	            })
			}

		}

		function onMenuTapped(){
			if(!$('#list-content-1 li').length&&!isLock){
				loadData();
			}
		}


	</script>
</html>